<template>
  <div id="app">
    <!-- header部分 -->
    <mt-header fixed title="项目开始">
      <span slot="left" @click="goback" v-show="flag">
        <mt-button icon="back">返回</mt-button>
      </span>
    </mt-header>

    <!-- 内容部分 -->

    <!-- footer部分 -->
    <div class="footer">
      <router-link class="a" to="/home">
        <span class="glyphicon glyphicon-home"></span>
        <p>首页</p>
      </router-link>

      <router-link class="a" to="/member">
        <span class="glyphicon glyphicon-user"></span>
        <p>会员</p>
      </router-link>

      <router-link class="a" to="/shopcar">
        <span class="glyphicon glyphicon-search"></span>
        <p>购物车</p>
      </router-link>

      <router-link class="a" to="/search">
        <span class="glyphicon glyphicon-search"></span>
        <p>搜索</p>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false
    };
  },
  methods: {
    goback(){
      this.$router.go(-1)
    }
  },
  created() {
    // this.flag = this.$route.path === "/home" ? false : true;
    this.flag = (this.$route.path === '/home' ? false : true)
  },
  // 监视器，监视路由的改变
  watch: {
    '$route.path': function (val) {
      if (val === '/home') {
        this.flag = false
      }else{
        this.flag = true
      }
    }
  }
};
</script>

<style lang="less" scoped>
#app {
  padding: 40px 0;
  .footer {
    width: 100%;
    height: 40px;
    background-color: rgb(73, 219, 28);
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    .a {
      text-decoration: none;
      flex: 1;
      text-align: center;
      // line-height: 0px;
      color: #fff;
      &.active {
        background-color: #fff;
        color: rgb(94, 87, 87);
      }
      // p{
      //   margin: 0;
      //   padding: 0;
      // }
    }
  }
}
</style>

